import type { MetaFunction } from "@remix-run/node";
import { useTranslation } from "react-i18next";
import { Link, useLocation } from '@remix-run/react'

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

const langs = [
  { text: '🇨🇳 中文', value: 'zh' },
  { text: '🇺🇸 English', value: 'en' },
]


export default function Index() {
  const location = useLocation()
  const pathname = location.pathname.replace(/\/$/, '')
  const { i18n, t } = useTranslation('common')
  const language = i18n.resolvedLanguage
  console.log(language)
  return (
    <div className="flex h-screen items-center justify-center">
      <div className="flex flex-col items-center gap-16">
        <header className="flex flex-col items-center gap-9">
          <div className="flex items-center gap-3 rounded-full bg-white/20 px-4 py-1 backdrop-blur-md transition hover:bg-white/80">
            {langs.map(({ text, value }) => (
              <Link
                key={value}
                to={`${pathname}?lng=${value}`}
                className={`scalable text-3xl opacity-40 hover:opacity-60 ${language === value && '!opacity-100'
                  }`}>
                {text.split(' ')[0]}
              </Link>
            ))}
          </div>
          <h1 className="leading text-2xl font-bold text-gray-800 dark:text-gray-100">
            {t('welcome')} to <span className="sr-only">Remix</span>
          </h1>
        </header>
        <nav className="flex flex-col items-center justify-center gap-4 rounded-3xl border border-gray-200 p-6 dark:border-gray-700">
          <p className="leading-6 text-gray-700 dark:text-gray-200">
            What&apos;s next?
          </p>
        </nav>
      </div>
    </div>
  );
}
